
// import React from "react";

// class DemoA extends React.Component {
//   constructor(props) {
//     super(props)
//     // 定义状态，在constructor中通过this.state = {} 来定义
//     // 在函数组件中，通过useState来定义
//     this.state = {
//       num: 1,
//       list:["a","b"]
//     }
//     this.add = this.add.bind(this)
//   }
//   add() {
//     // console.log("add...");
//     // console.log(this);

//     // this.state.num++; // 直接改变，模板不会刷新，render函数不会执行
//     // console.log(this.state.num);

//     // 在react中有一个专属方法，用来改变状态，通过这个专属方法修改状态
//     // 会重新render，叫re-render，视图就会刷新
//     // 下面的这两行代码几次修改了num,两次
//     //   1）通过this.state.num++，直接修改状态
//     //   2）通过this.setState 间接修改状态
//     // this.setState({
//     //   num: this.state.num++
//     // })

//     // ++放前，OK，不推荐，因为它直接修改了状态
//     // this.setState({
//     //   num: ++this.state.num
//     // })

//     // 不要直接修改状态（不可变数据）
//     // this.state.num + 1 仅仅是用了原始数据，没有修改原始数据。
//     // this.state.list.push("d") 不推荐
//     // [...this.state.list,"d"] 推荐
//     this.setState({
//       num: this.state.num + 1
//     })
//   }
//   render() {
//     console.log("render...");
//     let { num } = this.state;
//     return (
//       <div>
//         <h1>类组件</h1>
//         <h2>{num}</h2>
//         <button onClick={this.add}>+1</button>
//       </div>
//     )
//   }
// }

// export default DemoA

// ----------------------------------------

// import React from "react";

// class DemoA extends React.Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 1,
//     }
//     this.add = this.add.bind(this)
//   }
//   add() {
//     console.log(this.state.num);
//     // this.setState  在React18中，永远是异步的
//     // 在V18版本之前，有可能是同步，有可能是异步的
//     this.setState({
//       num: this.state.num + 1
//     })
//     console.log(this.state.num);
//   }
//   render() {
//     console.log("render...");
//     let { num } = this.state;
//     return (
//       <div>
//         <h1>类组件</h1>
//         <h2>{num}</h2>
//         <button onClick={this.add}>+1</button>
//       </div>
//     )
//   }
// }

// export default DemoA

// -------------------------------------------

import React from "react";

class DemoA extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      num: 1,
    }
    this.add = this.add.bind(this)
  }
  add() {
    // this.setState有另一种写法：
    //   格式1：this.setState({num:xxx},callback)
    //   格式2：this.setState((state)=>{return {num:state.num+1}},callback))

    // state永远是老状态
    // this.setState(state => {
    //   return {
    //     num: state.num + 1
    //     // num:state.num++ // 不好，因为直接修改了老状态
    //   }
    // })

    // 如果新的状态是由老的状态计算而来的，推荐使用格式2
    // 如果新的状态和老的状态没有任何关系，推荐使用格式1

    // 格式2的写法可以简化
    // this.setState(state => ({num: state.num + 1}))

    this.setState(_ => ({ num: _.num + 1 }), function () {
      // 在这个回调函数中，可以得到最新状态
      console.log(this.state.num);
    })

    // 在这里，不能得到最新的状态，因为stState是异步的。
    // console.log(this.state.num);
  }
  render() {
    console.log("render...");
    let { num } = this.state;
    return (
      <div>
        <h1>类组件</h1>
        <h2>{num}</h2>
        <button onClick={this.add}>+1</button>
      </div>
    )
  }
}

export default DemoA

